<template>
	<view class="container">
		<!--  #ifdef  APP-PLUS-->
		<uni-nav-bar fixed='true' @clickLeft='back' statusBar='true' style="width: 100%;">

			<view slot='left'>
				<text class="cuIcon-back"></text>

			</view>
			<view class="status-center padding-left center bg-F4F4F4  round" style="height: 70rpx;margin-left: -30px;">
				<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
				</image>
				<input type="text" v-model="name" @confirm="searchType('')" value="" class="text-13 f-grow1 padding-left-sm"
					placeholder="搜索商品名称" />
			</view>

		</uni-nav-bar>
		<!--  #endif -->

		<view class="bg-white position-relative">
			<!--  #ifdef     MP-WEIXIN -->
			<kg-custom :isBack="true" bgColor="bg-white">
				<block slot="left">
					<view class="flex justify-start align-center bg-F4F4F4 padding-left round margin-left-sm"
						style="height: 70rpx;width: 460rpx;">
						<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 25rpx;height: 25rpx;">
						</image>
						<input type="text" v-model="name" @input="searchType('')" value=""
							class="text-13 f-grow1 padding-left-sm" placeholder="搜索商品名称" />
					</view>
				</block>
			</kg-custom>
			<!--  #endif -->




			<view class="text-666 text-df bg-white flex justify-between align-center padding-left-sm padding-right-sm"
				:style="{height: '86rpx',position:'fixed',top:CustomBar,width:'100%'}" style="z-index: 999;">
				<view :class="{'text-221815 text-bold':sortStr==''}" @click="searchType('')">
					综合
				</view>
				<view class="flex justify-center align-center" :class="{'text-221815 text-bold':sortStr==1}"
					@click="searchType(1)">
					<view class="margin-right-xs">
						按销量
					</view>
					<!-- <image :src="baseUrl + '/static/up.png'" mode="" style="width: 16rpx;height: 10rpx;"></image> -->
				</view>
				<view class="flex justify-center align-center" :class="{'text-221815 text-bold':sortStr==2}"
					@click="searchType(2)">
					<view class="margin-right-xs">
						按价格
					</view>
					<image v-if="sortStr==2&&sortType==2" :src="baseUrl + '/static/down.png'" mode=""
						style="width: 16rpx;height: 10rpx;"></image>
					<image v-else :src="baseUrl + '/static/up.png'" mode="" style="width: 16rpx;height: 10rpx;"></image>
				</view>
				<!-- <view class="flex justify-center align-center">
					<view class="margin-right-xs">
						按距离
					</view>
					<image :src="baseUrl + '/static/up.png'" mode="" style="width: 16rpx;height: 10rpx;"></image>
				</view> -->
				<!-- <view class="color" @click="openMask">
					筛选
				</view> -->
			</view>
		</view>
		<view class="scroll-y">
			<view class="flex flex-wrap justify-start margin-left-sm margin-right-sm margin-bottom-sm list">
				<view class="position-relative bg-white radius10 margin-top-sm" style="width: 348rpx;min-width: 348rpx;"
					v-for="(item,index) in list"
					@click.stop="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.id)"
					:class="{'margin-left14':index%2}">
					<view v-if="item.groupStatus==1" class="text-11 zIndex flex justify-center align-center text-white"
						:style="'background-image: url('+ baseUrl + '/static/shop_bg2.png);background-size: 100% 100%;width: 70rpx;height: 36rpx;position: absolute;left: 0;top: 0'">
						团购
					</view>
					<view v-if="item.newStatus==1&&item.groupStatus==0"
						class="text-11 zIndex flex justify-center align-center text-white"
						:style="'background-image: url('+ baseUrl + '/static/shop_bg2.png);background-size: 100% 100%;width: 70rpx;height: 36rpx;position: absolute;left: 0;top: 0'">
						新品
					</view>
					<view v-if="item.newStatus==0&&item.recommandStatus==1&&item.groupStatus==0"
						class="text-11 zIndex flex justify-center align-center text-white"
						:style="'background-image: url('+ baseUrl + '/static/shop_bg2.png);background-size: 100% 100%;width: 70rpx;height: 36rpx;position: absolute;left: 0;top: 0'">
						热卖
					</view>
					<!-- <view
					  v-if="item.groupStatus==1"
					  class="text-11 zIndex flex justify-center align-center text-white"
					  :style="
					    'background-image: url(' +
					    baseUrl +
					    '/static/shop_bg.png);background-size: 100% 100%;width: 82rpx;height: 34rpx;position: absolute;left: 15rpx;top: 152rpx'
					  "
					>
					  {{ item.discount }}折
					</view> -->
					<image :src="item.pic" mode="" class="width-sub radius-t-l radius-t-r" style="height: 348rpx;">
					</image>
					<view class="padding-sm" v-if="item.groupStatus==1">
						<view class="text-cut text-15 text-333">
							{{item.name}}
						</view>
						<view class="color text-sm margin-top-sm">
							¥{{parseFloat(item.groupBuyPrice/100).toFixed(2)}}
						</view>
						<view class="flex justify-between align-center margin-top-sm">
							<view class="text-sm text-999 text-delete">
								¥{{parseFloat(item.price/100).toFixed(2)}}
							</view>
							<image @click.stop="showSku(item.id)" :src="baseUrl + '/static/cart.png'" mode=""
								style="width: 28rpx;height: 28rpx;"></image>
						</view>
					</view>
					<view class="padding-sm" v-else>
						<view class="text-cut text-15 text-333">
							{{item.name}}
						</view>
						<view class="color text-sm margin-top-sm">
							¥{{parseFloat(item.price/100).toFixed(2)}}
						</view>
						<view class="flex justify-between align-center margin-top-sm">
							<view class="text-sm text-999 text-delete">
								¥{{parseFloat(item.originalPrice/100).toFixed(2)}}
							</view>
							<image @click.stop="showSku(item.id)" :src="baseUrl + '/static/cart.png'" mode=""
								style="width: 28rpx;height: 28rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-drawer ref="drawer" :width="285" mode="right" :mask="true">
			<view class="padding-left-sm padding-bottom-sm padding-right-sm" :style="'margin-top:' +CustomBar+'px;'">
				<view class="solid-bottom margin-top-sm">
					<view class="flex justify-between align-center">
						<view class="">
							品牌
						</view>
						<view class="cuIcon-unfold">

						</view>
					</view>
					<view class="flex flex-wrap tabs">
						<view
							class="bg-F9F9F9 padding-sm radius margin-left-xs text-sm margin-top-sm tab flex justify-center align-center"
							v-for="(item,index) in 6" :class="{'on':index==0}">
							品牌名
						</view>
					</view>
				</view>
				<view class="solid-bottom margin-top-sm">
					<view class="flex justify-between align-center">
						<view class="">
							品牌
						</view>
						<view class="cuIcon-unfold">

						</view>
					</view>
					<view class="flex flex-wrap tabs">
						<view
							class="bg-F9F9F9 padding-sm radius margin-left-xs text-sm margin-top-sm tab flex justify-center align-center"
							v-for="(item,index) in 6" :class="{'on':index==0}">
							品牌名
						</view>
					</view>
				</view>
				<view class="flex justify-between align-center g-l-fooder">
					<button class="text-15 padding-sm text-666 round bg-tr solid">重置</button>
					<button class="text-15 padding-sm text-white round bg-color">确认</button>
				</view>




			</view>
		</uni-drawer>
		<uni-load-more :status="loading" />
		<!--底部 sku 选择弹窗 -->
		<wui-specification :goodsInfo="goodsInfo" btnType="1" :show="show" @select="selectSku" @close="hideSku">
		</wui-specification>
	</view>
</template>

<script>
	import BetterPull from '@/common/libs/BetterPull'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		mixins: [
			BetterPull({
				async getPage(page, done) {
					this.loading = 'loading';
					let param
					if (this.name) {
						param = {
							pageNum: page,
							pageSize: 10,
							sortStr: this.sortStr,
							sortType: this.sortType,
							secondCategoryId: this.secondCategoryId,
							name: this.name,
							groupStatus: this.groupStatus
						}
					} else {
						param = {
							pageNum: page,
							pageSize: 10,
							sortStr: this.sortStr,
							sortType: this.sortType,
							secondCategoryId: this.secondCategoryId,
							groupStatus: this.groupStatus
						}
					}
					const [err, res] = await this.$get(this.$api.product_listByProductQueryParam, param)
					if (res) {
						var data = res.data.list
						done(data);
						if (data.length < 10) {
							this.loading = 'noMore';
						} else {
							this.loading = 'more';
						}

					}
					if (err) {
						done([]);
						this.loading = 'noMore';
					}
				}
			})
		],
		components: {
			uniNavBar
		},
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				loading: 'more',
				CustomBar: this.CustomBar,
				statusBar: true,
				sortStr: '',
				sortType: 2,
				list: [],
				pageNum: 1,
				height: 0,
				secondCategoryId: '',
				show: false,
				goodsInfo: {},
				selectInfo: {
					difference: '请选择规格'
				}, //存放最后选中的商品
				groupStatus: 0,
				name:''
			};
		},
		onLoad(options) {
			// this.scrolltolower()
			if (options.secondCategoryId) this.secondCategoryId = options.secondCategoryId
			if (options.groupStatus) this.groupStatus = options.groupStatus
		},
		methods: {
			showSku(e) {
				this.goodsInfo = {}
				this.getInfo(e)
			},
			back() {
				console.log(1111)
				uni.navigateBack({
			
				})
			},
			hideSku(e) {
				this.show = false
				this.selectInfo = e
				// console.log(e)
			},
			selectSku(options) { //点击sku弹窗中的加入购物车或结算按钮
				this.show = false
				this.selectInfo = options
				if (this.goodsInfo.groupStatus && this.goodsInfo.sku_list.length == 0) {
					this.selectInfo.price = this.goodsInfo.groupPrice
				}
				this.addCart()
			},
			async getInfo(e) {
				const [err, res] = await this.$get(this.$api.product_detail, {
					id: e
				})
				if (res) {
					this.show = true
					this.goodsInfo = res.data
				}
			},
			async addCart() {
				// console.log(this.selectInfo)
				const [err, res] = await this.$post(this.$api.car_add, {
					attributes: this.selectInfo.difference,
					buyNum: this.selectInfo.num,
					price: this.selectInfo.price,
					productId: this.goodsInfo.id,
					productImg: this.selectInfo.pic ? this.selectInfo.pic : this.goodsInfo.pic,
					productName: this.goodsInfo.name,
					shopId: this.goodsInfo.shopId,
					shopImg: this.goodsInfo.shopImg,
					shopName: this.goodsInfo.shopName,
					skuId: this.selectInfo.id
				})
				if (res) {
					// console.log(res)
					this.$util.msg('加入购物车成功')
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 1500)
				}
			},
			openMask() {
				this.$refs['drawer'].open()		
			},
			searchType(e) {
				console.log(e)
				this.sortStr = e
				if (e == 2) {
					if (this.sortType == 1) {
						this.sortType = 2
					} else {
						this.sortType = 1
					}
				}
				this.pageNum = 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				this.Refresh();
				// this.scrolltolower()
			},

			toPage(url) {
				this.$util.openNewPage(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-y {
		margin-top: 86rpx;
	}

	.tabs {
		.tab {
			// min-width: 170rpx;
			height: 76rpx;
		}

		.on {
			color: #ED7200;
			border: 1rpx solid;
			background: #FFDEC0;
		}
	}

	.g-l-fooder {
		margin: 30rpx 0;

		button {
			width: 256rpx;
		}
	}

	.status-center {
		width: 460rpx;
		display: flex;
		align-items: center;
	}
</style>
